通过google maps获取国家

需求

根据国家过去相关报警电话, 页面为h5

解决方案

最开始直接想到的是通过百度地图api来进行,实现不过查看官方文档来看,满足不了要求,不能获取到国家级别的数据

百度地图api

官方 JavaScript api

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8a9c8c9b61196a1b5be23217fc94a489">
//v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式:src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//var point = new BMap.Point(116.404, 39.915); // 创建点坐标
//map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
var geolocation = new BMap.Geolocation();
var boundary = new BMap.Boundary();
boundary.get("上海", function(data) {
console.info(data);
})
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
console.info('您的位置:' + r.point.lng + ',' + r.point.lat);
// 创建地理编码实例
var myGeo = new BMap.Geocoder();
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {
console.info(result);
if (result) {
console.info(result.address);
}
});
}
else {
alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
</script>
</body>
</html>

image
最高只能获取到province省份,不能获取到国家

高德地图api

官方JavaScript api
同样不能拿到 国家,demo 略

h5api&google maps api

HTML5 Geolocation(地理定位)用于定位用户的位置。是html5的主要特性之一

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<body>
<script>
if (navigator.geolocation) {
// getCurrentPosition支持三个参数
// getSuccess是执行成功的回调函数
// getError是失败的回调函数
// getOptions是一个对象,用于设置getCurrentPosition的参数
// 后两个不是必要参数
var getOptions = {
//是否使用高精度设备,如GPS。默认是true
enableHighAccuracy : true,
//超时时间,单位毫秒,默认为0
timeout : 5000,
//使用设置时间内的缓存数据,单位毫秒
//默认为0,即始终请求新数据
//如设为Infinity,则始终使用缓存数据
maximumAge : 0
};
//成功回调
function getSuccess(position) {
alert(position);
// getCurrentPosition执行成功后,会把getSuccess传一个position对象
// position有两个属性,coords和timeStamp
// timeStamp表示地理数据创建的时间??????
// coords是一个对象,包含了地理位置数据
console.info(position.timeStamp);
// 估算的纬度
console.info(position.coords.latitude);
// 估算的经度
console.info(position.coords.longitude);
alert("当前位置:" + position.coords.latitude + ","
+ position.coords.longitude);
getCounty({'latitude':position.coords.latitude, 'longitude':position.coords.longitude});
// 估算的高度 (以米为单位的海拔值)
console.info(position.coords.altitude);
// 所得经度和纬度的估算精度,以米为单位
console.info(position.coords.accuracy);
// 所得高度的估算精度,以米为单位
console.info(position.coords.altitudeAccuracy);
// 宿主设备的当前移动方向,以度为单位,相对于正北方向顺时针方向计算
console.info(position.coords.heading);
// 设备的当前对地速度,以米/秒为单位
console.info(position.coords.speed);
// 除上述结果外,Firefox还提供了另外一个属性address
if (position.address) {
//通过address,可以获得国家、省份、城市
console.info(position.address.country);
console.info(position.address.province);
console.info(position.address.city);
}
}
//获取国家 根据经纬度获取国家
function getCounty(data) {
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + data.latitude + "," + data.longitude + "&sensor=false&language=CN";
$.post(url, function(data){
console.info(data);
if(data.status == 'OK') {
var results = data.results;
for (var i=0; i < results[0].address_components.length; i++) {
for (var j=0; j < results[0].address_components[i].types.length; j++) {
if (results[0].address_components[i].types[j] == "country") {
country = results[0].address_components[i];
console.log(country.long_name)
alert(country.long_name)
console.log(country.short_name)
alert(country.short_name)
}
}
}
} else {
alert('定位失败')
}
});
}
//失败回调
function getError(error) {
// 执行失败的回调函数,会接受一个error对象作为参数
// error拥有一个code属性和三个常量属性TIMEOUT、PERMISSION_DENIED、POSITION_UNAVAILABLE
// 执行失败时,code属性会指向三个常量中的一个,从而指明错误原因
alert(error);
switch (error.code) {
case error.TIMEOUT:
alert("超时")
console.info('超时');
break;
case error.PERMISSION_DENIED:
alert("用户拒绝提供地理位置")
console.info('用户拒绝提供地理位置');
break;
case error.POSITION_UNAVAILABLE:
alert("地理位置不可用");
console.info('地理位置不可用');
break;
default:
break;
}
}
navigator.geolocation.getCurrentPosition(getSuccess, getError,
getOptions);
// watchPosition方法一样可以设置三个参数
// 使用方法和getCurrentPosition方法一致,只是执行效果不同。
// getCurrentPosition只执行一次
// watchPosition只要设备位置发生变化,就会执行
var watcher_id = navigator.geolocation.watchPosition(getSuccess,
getError, getOptions);
//clearwatch用于终止watchPosition方法
navigator.geolocation.clearWatch(watcher_id);
}
</script>
</body>
</html>

  • 通过navigator.geolocation获取到坐标位置,然后通过google maps api可以获取到国家(无需google map api key) ps:国内需要翻墙
  • 需要开启手机定位,如果不开启定位要获取可以使用ip段or百度api定位(百度获取到的经纬度不能直接使用需要进行转换,原因为坐标系统不一致)

PS

  • 百度&高德没看到支持,希望提供支持(可能没看到,如果有人懂的可以联系下)
  • 代码略挫,因为前端是直接用vue写的,就不需要我来封装了,省事

参考